<h2><a href="#">Generador</a> &raquo; <a href="#" class="active">Nuevo modulo</a></h2>
<div id="main">
		<fieldset>
			<form action="<?=$this->form->getAction()?>" method="<?=$this->form->getMethod()?>" enctype="multipart/form-data">
				<div class="subForm">	
				    <?=$this->form->getSubForm("common") ?>
				</div>
				<?= $this->form->getElement("add") ?>
			</form>
        </fieldset>

<style>
    #customFields { float: left; width : 100%; text-align: left; }
    #customFields h3 {float: left; width : 100%; }
    #customFields #buttonAdd { float: left; }
    #customFields #buttoLangAdd { float: left;  }
    #customFields #buttoLangAdd a { text-decoration: none; color :#888; margin-bottom: 20px; margin-top: 20px;}
    .fieldData { float: left; width : 100%; margin-bottom : 20px; display : none;}
    .fieldLangData { float: left; width : 100%; margin-bottom : 20px; display : none;}
    .itemForm { float: left; width: 100%; margin-top : 10px; }
    .itemForm .itemFormLeft { float: left; width : 25%; }
    .itemForm .itemFormRight { float: left; width : 75%; }
    .fieldsResults { float: left; width : 100%; }
    .tableFieldsResults { width : 100%; float: left; margin-top : 20px; margin-bottom: 20px; }
    .tableLangFieldsResults { width : 100%; float: left; margin-top : 20px; margin-bottom: 20px; }
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $("#buttonAdd").click(function(){
            $(".fieldData").css("display","block");
        });

        $("#buttoLangAdd").click(function(){
            $(".fieldLangData").css("display","block");
        });

        function updateFields()
        {
            $("#common-fields").val("");
            var length = $(".tableFieldsResults tbody tr");
            length = length.length;
            var nuevoVal = '';
            $(".tableFieldsResults tbody tr").each( function (index)
            {
		var fieldName = $("#"+$(this).attr("id") + " > .name").html();
		var fieldType = $("#"+$(this).attr("id") + " > .type").html();
		var fieldObligatory =  $("#"+$(this).attr("id") + " > .oblig").html();
		var fieldDefault = $("#"+$(this).attr("id") + " > .default").html();
                var fieldLabel = $("#"+$(this).attr("id") + " > .label").html();
                if ( index == 0 )
		{

			nuevoVal = "[{\"name\":\""+fieldName+"\" ,\"type\":\""+ fieldType + "\",\"obligatory\":\""+ fieldObligatory +"\",\"default\":\""+fieldDefault+"\", \"label\": \""+fieldLabel+"\"}" ;
		}
		else
		{
			nuevoVal = nuevoVal + ",{\"name\":\""+fieldName+"\" ,\"type\":\""+ fieldType + "\",\"obligatory\":\""+ fieldObligatory +"\",\"default\":\""+fieldDefault+"\", \"label\": \""+fieldLabel+"\"}" ;
		}

            });
            if ( length > 0 )
                $("#common-fields").val(nuevoVal+"]");
        }

        function updateLangFields()
        {
            $("#common-langFields").val("");
            var length = $(".tableLangFieldsResults tbody tr");
            length = length.length;
            var nuevoVal = '';
            $(".tableLangFieldsResults tbody tr").each( function (index)
            {
		var fieldName = $("#"+$(this).attr("id") + " > .name").html();
		var fieldType = $("#"+$(this).attr("id") + " > .type").html();
		var fieldObligatory =  $("#"+$(this).attr("id") + " > .oblig").html();
		var fieldDefault = $("#"+$(this).attr("id") + " > .default").html();
                var fieldLabel = $("#"+$(this).attr("id") + " > .label").html();
                if ( index == 0 )
		{

			nuevoVal = "[{\"name\":\""+fieldName+"\" ,\"type\":\""+ fieldType + "\",\"obligatory\":\""+ fieldObligatory +"\",\"default\":\""+fieldDefault+"\", \"label\": \""+fieldLabel+"\"}" ;
		}
		else
		{
			nuevoVal = nuevoVal + ",{\"name\":\""+fieldName+"\" ,\"type\":\""+ fieldType + "\",\"obligatory\":\""+ fieldObligatory +"\",\"default\":\""+fieldDefault+"\", \"label\": \""+fieldLabel+"\"}" ;
		}

            });
            if ( length > 0 )
                $("#common-langFields").val(nuevoVal+"]");
        }


        var fieldsCount = 0;
        $(".loadField").click(function(){
            if ($(".fieldName").val() != "")
            {
                fieldsCount++;
                var tr = document.createElement("tr");
                $(tr).attr("id","tr-"+fieldsCount);
                var td1 = document.createElement("td");
                $(td1).append($(".fieldName").val());
                $(td1).addClass("name");
                var td2 = document.createElement("td");
                $(td2).append($(".fieldType").val());
                $(td2).addClass("type");
                var td3 = document.createElement("td");
                var obligValue = 0;
                if ( $(".fieldOblig").is(':checked') )
                    obligValue = 1;
                $(td3).append(obligValue);
                $(td3).addClass("oblig");
                var td4 = document.createElement("td");
                $(td4).append($(".fieldDefault").val());
                $(td4).addClass("default");
                var td5 = document.createElement("td");
                $(td5).append($(".fieldLabel").val());
                $(td5).addClass("label");
                var td6 = document.createElement("td");
                var linkDelete = document.createElement("a");
                $(linkDelete).attr("href","#");
                $(linkDelete).attr("rel",fieldsCount);
                var img = document.createElement("img");
                $(img).attr("src","/images/icons/delete.png");
                $(linkDelete).append(img);
                $(linkDelete).click(function(){
                    var num = $(this).attr("rel");
                    $("#tr-"+num).remove();
                    updateFields();
                });
                $(td6).append(linkDelete);
                $(tr).append(td1);
                $(tr).append(td2);
                $(tr).append(td3);
                $(tr).append(td4);
                $(tr).append(td5);
                $(tr).append(td6);
                $(".tableFieldsResults tbody").append(tr);
                $(".fieldData").css("display", "none");
                updateFields();
            }
        });


        $(".loadLangField").click(function(){
            if ($(".langFieldName").val() != "")
            {
                fieldsCount++;
                var tr = document.createElement("tr");
                $(tr).attr("id","trLang-"+fieldsCount);
                var td1 = document.createElement("td");
                $(td1).append($(".langFieldName").val());
                $(td1).addClass("name");
                var td2 = document.createElement("td");
                $(td2).append($(".langFieldType").val());
                $(td2).addClass("type");
                var td3 = document.createElement("td");
                var obligValue = 0;
                if ( $(".langFieldOblig").is(':checked') )
                    obligValue = 1;
                $(td3).append(obligValue);
                $(td3).addClass("oblig");
                var td4 = document.createElement("td");
                $(td4).append($(".langFieldDefault").val());
                $(td4).addClass("default");
                var td5 = document.createElement("td");
                $(td5).append($(".langFieldLabel").val());
                $(td5).addClass("label");
                var td6 = document.createElement("td");
                var linkDelete = document.createElement("a");
                $(linkDelete).attr("href","#");
                $(linkDelete).attr("rel",fieldsCount);
                var img = document.createElement("img");
                $(img).attr("src","/images/icons/delete.png");
                $(linkDelete).append(img);
                $(linkDelete).click(function(){
                    var num = $(this).attr("rel");
                    $("#trLang-"+num).remove();
                    updateFields();
                });
                $(td6).append(linkDelete);
                $(tr).append(td1);
                $(tr).append(td2);
                $(tr).append(td3);
                $(tr).append(td4);
                $(tr).append(td5);
                $(tr).append(td6);
                $(".tableLangFieldsResults tbody").append(tr);
                $(".fieldLangData").css("display", "none");
                updateLangFields();
            }
        });

    });
</script>
    <div id="customFields">
        <div id="commonCustomFields">
            <h3>Campos comunes en todos los idiomas</h3>
            <div id="buttonAdd"><a href="#buttonAdd"><img style="vertical-align : middle;" src="/images/icons/add.png" />&nbsp;Nuevo Campo</a></div>
            <div class="fieldData">
                <div class="itemForm">
                    <div class="itemFormLeft"><label>Nombre: </label></div>
                    <div class="itemFormRight">
                        <input type="text" class="fieldName"/>
                    </div>
                </div>
                <div class="itemForm">
                    <div class="itemFormLeft"><label>Label: </label></div>
                    <div class="itemFormRight">
                        <input type="text" class="fieldLabel"/>
                    </div>
                </div>
                <div class="itemForm">
                    <div class="itemFormLeft"><label>Tipo: </label></div>
                    <div class="itemFormRight">
                        <select class="fieldType">
                            <option value="date">Fecha</option>
                            <option value="checkbox">Checkbox</option>
                            <option value="text">Texto simple</option>
                            <option value="editor">Editora</option>
                            <option value="file">Archivo</option>
                        </select>
                    </div>
                </div>
                <div class="itemForm">
                    <div class="itemFormLeft"><label>Obligatorio: </label></div>
                    <div class="itemFormRight">
                        <input type="checkbox" class="fieldOblig"/>
                    </div>
                </div>
                <div class="itemForm">
                    <div class="itemFormLeft"><label>Valor por defecto: </label></div>
                    <div class="itemFormRight">
                        <input type="text" class="fieldDefault"/>
                    </div>
                </div>
                <div class="itemForm">
                    <div class="itemFormLeft"></div>
                    <div class="itemFormRight">
                        <button class="loadField">Aceptar</button>
                    </div>
                </div>
            </div>
            <h3>Campos por idioma</h3>
            <div id="buttoLangAdd"><a href="#buttonLangAdd"><img style="vertical-align : middle;" src="/images/icons/add.png" />&nbsp;Nuevo Campo</a></div>
            <div class="fieldLangData">
                <div class="itemForm">
                    <div class="itemFormLeft"><label>Nombre: </label></div>
                    <div class="itemFormRight">
                        <input type="text" class="langFieldName"/>
                    </div>
                </div>
                <div class="itemForm">
                    <div class="itemFormLeft"><label>Label: </label></div>
                    <div class="itemFormRight">
                        <input type="text" class="langFieldLabel"/>
                    </div>
                </div>
                <div class="itemForm">
                    <div class="itemFormLeft"><label>Tipo: </label></div>
                    <div class="itemFormRight">
                        <select class="langFieldType">
                            <option value="date">Fecha</option>
                            <option value="checkbox">Checkbox</option>
                            <option value="text">Texto simple</option>
                            <option value="editor">Editora</option>
                            <option value="file">Archivo</option>
                        </select>
                    </div>
                </div>
                <div class="itemForm">
                    <div class="itemFormLeft"><label>Obligatorio: </label></div>
                    <div class="itemFormRight">
                        <input type="checkbox" class="langFieldOblig"/>
                    </div>
                </div>
                <div class="itemForm">
                    <div class="itemFormLeft"><label>Valor por defecto: </label></div>
                    <div class="itemFormRight">
                        <input type="text" class="langFieldDefault"/>
                    </div>
                </div>
                <div class="itemForm">
                    <div class="itemFormLeft"></div>
                    <div class="itemFormRight">
                        <button class="loadLangField">Aceptar</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="fieldsResults">
            <table class="tableFieldsResults">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Tipo</th>
                        <th>Obligatorio</th>
                        <th>Default</th>
                        <th>Label</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

        <div class="langFieldsResults">
            <table class="tableLangFieldsResults">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Tipo</th>
                        <th>Obligatorio</th>
                        <th>Default</th>
                        <th>Label</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    </div>
</div>
<div class="clear"></div>